<template>
  <p class="tip-content">
    发送至
    <van-icon
      name="phone-circle-o"
      size="0.14rem"
      v-show="telphone"
      color="#888888"
    />
    {{ telphone }}
  </p>
  <div class="iptarea">
    <div class="iptPhone">
      <input
        type="tel"
        v-model="iptCaptcha"
        placeholder="请输入验证码"
        @blur="flag = true"
      />
      <span
        class="captchabtn"
        :style="{ color: getCaptcha ? '#B56CFF' : '#cccccc' }"
        @click="sendCaptcha(), seconds()"
        >{{ secondTip }}
      </span>
    </div>
  </div>
  <van-button
    type="primary"
    size="large"
    block
    :color="flag ? '#b56cff' : '#999999'"
    round
    class="personSty"
    @click="nextStepLogin"
  >
    下一步</van-button
  >
  <bottomPolicy />
</template>
<script>
import { Toast } from "vant";
import bottomPolicy from "@/views/phonelogin/bottomPolicy.vue";
export default {
  components: {
    bottomPolicy,
  },
  data() {
    return {
      flag: false,
      iptCaptcha: "", //用户输入的验证码
      validateMa: "", //后台验证码
      getCaptcha: true,
      timer: null,
      secondTip: "获取验证码",
    };
  },
  computed: {
    telphone() {
      return this.$store.state.telphone;
    },
  },
  created() {
    this.sendCaptcha();
    this.seconds();
  },
  methods: {
    seconds() {
      let countsec = 10;
      if (this.timer) return;
      this.secondTip = "获取验证码（60S）";
      this.getCaptcha = false;
      this.timer = setInterval(() => {
        countsec--;
        if (countsec == 0) {
          this.getCaptcha = true;
          this.secondTip = "获取验证码";
          clearInterval(this.timer);
          this.timer = null;
        } else {
          this.secondTip = "获取验证码（" + countsec + "S）";
        }
      }, 1000);
    },
    nextStepLogin() {
      if (this.$store.state.botChecked && this.validateMa === this.iptCaptcha) {
        // 验证码正确，发送登录请求，存储token，用户信息 增加loading状态 交互友好
        // this.$router.replace("/home"); //取消loading状态，跳转链接
      } else {
        this.$store.state.botChecked
          ? Toast("请阅读用户协议，并同意勾选")
          : Toast("验证码有误！！！");
      }
    },
    sendCaptcha() {
      // 发送验证码请求
      if (this.getCaptcha) {
        console.log("发送验证码");
      }
    },
  },
};
</script>
<style scoped lang="less">
.tip-content {
  height: 0.12rem;
  color: rgba(153, 153, 153, 1);
  font-size: 0.12rem;
  line-height: 0.12rem;
  margin-top: 0.24rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
button.personSty {
  width: 3.35rem;
  height: 0.44rem;
  font-size: 0.14rem;
  margin: 0 auto;
  margin-top: 0.12rem;
}
.iptarea {
  display: flex;
  width: 3.35rem;
  align-items: flex-end;
  margin: 0 auto;
  border-bottom: 0.01rem solid #333;
  margin-top: 0.3rem;
  margin-bottom: 0.24rem;
  .areanum {
    color: rgb(102, 102, 102);
    font-size: 0.13rem;
    line-height: 0.22rem;
  }
  .iptPhone {
    height: 0.3rem;
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-left: 0.1rem;
    input[type="tel"] {
      height: 75%;
      display: block;
      font-size: 0.13rem;
      color: #666;
      border: none;
      flex: 1;
    }
    .captchabtn {
      font-size: 0.14rem;
    }
  }
}
</style>
